<template>
    <el-container >
        <el-aside width="15%">
            <el-menu default-active="/deployment" mode="vertical" :router="true">
                <el-menu-item index="/deployment">流程部署列表</el-menu-item>
                <el-menu-item index="/deployment">流程定义列表</el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>

</template>

<script lang="ts">

    import Vue from 'vue'
    import Component from 'vue-class-component'

    @Component({})
    export default class Deployment extends Vue {

    }
</script>

<style lang="scss" scoped>

    @import "../../element-variables";

    .el-container{
        padding: 20px;
    }

    .el-aside{
        border:{
            radius: 5px;
        }
    }

    /* 菜单字体颜色 */
    .el-menu-item.is-active{
        color: #000;
    }

    /* 鼠标悬浮背景 */
    .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
    .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus{
        background: {
            color: $--color-primary-light-6;
        };
        opacity: 0.5;
    }

    /* 菜单背景 */
    .el-menu-item{
        background: {
            color: $--color-primary-light-6;
        };

    }

</style>